<template>
  <vue-json-editor
    v-if="editable"
    v-model="innerJson"
    :exapndedOnStart="true"
    key="edit"
    lang="zh"
  ></vue-json-editor>
  <vue-json-editor
    v-else
    v-model="innerJson"
    :exapndedOnStart="true"
    :modes="['view']"
    mode="view"
    key="detail"
    lang="zh"
  ></vue-json-editor>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
export default {
  components: {
    vueJsonEditor
  },
  props: {
    json: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      innerJson: this.json
    }
  },
  watch: {
    json(data) {
      this.innerJson = data
    },
    innerJson(data) {
      this.$emit('update:json', data)
    }
  },
  computed: {},
  methods: {}
}
</script>

<style></style>
